<template>
  <div class="home-page">
    <el-container style="height: 100%">
      <el-header style="height:82px;padding:0">
        <div class="header-class">
          <img src="@/assets/img/logo.png" alt="" style="margin-right: 20px">
          <div class="title">
            航天宏图实景三维数据轻量化软件
          </div>
        </div>
      </el-header>
      <el-container style="height: calc(100% - 82px)">
        <el-aside width="224px" style="box-sizing: border-box;padding-top: 20px">
          <div style="height:calc(100% - 20px)" class="aside-class">
            <div :class="activeIndex == 0 ? 'button button-active' : 'button'" @click="toggle('modelLightweight', 0)">
              模型轻量化
            </div>
            <div :class="activeIndex == 1 ? 'button button-active' : 'button'" @click="toggle('visualization', 1)">可视化与质检
            </div>
          </div>
        </el-aside>
        <el-main>
          <div class="main-content">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: 0
    };
  },
  methods: {
    toggle (path, index) {
      this.activeIndex = index
      this.$router.push(`/${path}`)
    }
  },
  created () { },
  mounted () {
    if (this.$route.path == '/visualization') {
      this.activeIndex = 1
    }
    if (this.$route.path == '/modelLightweight') {
      this.activeIndex = 0
    }
  }
};
</script>
<style lang="less" scoped>
.home-page {
  width: 100%;
  height: 100%;
  background: url(~@/assets/img/content-bg.png) no-repeat;
  background-size: 100% 100%;

  .header-class {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    color: #fff;
    background: url(~@/assets/img/head-bg.png) no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 0 20px;

    .title {
      font-size: 46px;
      font-family: YouSheBiaoTiHei;
      color: #FFFFFF;
      line-height: 60px;
      // text-shadow: 0px 2px 12px #1392FD;
      background: linear-gradient(180deg, #6AC7FE 0%, #FFFFFF 50%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .aside-class {
    background: rgba(11, 56, 105, 0.35);
    box-sizing: border-box;
  }

  .button {
    width: 100%;
    height: 61px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: url(~@/assets/img/button.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }

  .button-active {
    background: url(~@/assets/img/button-active.png) no-repeat;
  }

  .main-content {
    width: 100%;
    height: 100%;
    background: url(~@/assets/img/cover.png);
    background-size: 100% 100%;
  }
}
</style>